<template>
  <el-card class="debug-info-card" :style="{ height: height + 'px' }">
    <template #header>
      <div class="card-header">
        <span class="title">调试信息</span>
        <el-button link @click="clearLog">清空</el-button>
      </div>
    </template>
    <el-scrollbar class="debug-info-scrollbar" :style="{ height: scrollerHeight + 'px' }" always>
      <el-space direction="vertical">
        <el-text v-for="log in logList" :key="log" class="list-item">{{ `${log}` }}</el-text>
      </el-space>
    </el-scrollbar>
  </el-card>
</template>

<script>
import * as ELECTION from '@/electron'

export default {
  name: 'DebugInfo',
  props: {
    height: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      // 日志列表
      logList: []
    }
  },
  computed: {
    scrollerHeight() {
      return this.height - 26
    }
  },
  watch: {},
  mounted() {
    this.$emitter.on(ELECTION.PRINT_DEBUG_LOG, this.printDebugLog)
    this.$emitter.on(ELECTION.CLEAR_DEBUG_LOG, this.clearLog)
  },
  methods: {
    printDebugLog(log) {
      this.logList.push(log)
    },
    clearLog() {
      this.logList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.debug-info-card {
  width: unset;
  margin-right: 4px;
  border: #6593cf solid 1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  :deep(.el-card__header) {
    padding: 0 8px;
    border: none;
    background-color: #dcebff;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: stretch;

      .title {
        color: #154a93;
        font-size: 12px;
        line-height: 24px;
      }

      .el-button.is-link {
        color: #154a93;
        font-size: 11px;
      }
    }
  }

  :deep(.el-card__body) {
    padding: 0;
  }
}
</style>
